<template>
    <div style="width:1200px;margin:0 auto;">
        <!-- 面包屑 -->
        <bread-crumb :title="publisherlist.title"></bread-crumb>
        <!-- 整体布局 -->
        <div class="f-sb">
            <!-- 左边页面的设计 标题 -->
            <div class="new-left">
                <div class="title">{{ publisherlist.title }}</div>
                <div class="publisher">
                    {{ publisherlist.updateTime + ' 来源：' + (publisherlist.source == null ? '' : publisherlist.source) }}
                    <img src="../assets/weixin-23.png" alt="" class="img1" @click="palaton">
                </div>
                <div class="line"></div>
                <!-- 文章阅读界面 循环 -->
                <div class="news-content qi-show qi-editor ql-align-center" v-html="publisherlist.content">
                </div>
            </div>
            <!-- 右边页面的设计 -->
            <div class="new-right">
                <div>
                    <div class="account-item">
                        <div class="account-icon f-c-c">
                            <img src="../assets/logo.png" alt="" style="width:80%">
                        </div>
                        <div class="account-name f-c-c">福建教育网</div>
                        <div class="account-text f-c-c">福建教育电视台主办</div>
                    </div>
                </div>
                <div class="recommend">
                    <div class="f-c-st">
                        <div class="recommend-tit">其他推荐</div>
                        <div class="f-c-c" style="margin-left:18px">
                            <img src="../assets/ggdfx.png" alt="">
                        </div>
                    </div>
                </div>
                <loading v-show="huarry.length == 0"></loading>
                <div class="item f-c-st" v-for="(item, index) in huarry" :key="index">
                    <div class="stop"></div>
                    <div class="item-heading" @click="getpush(item.id)">
                        {{ item.title }}
                    </div>
                </div>
                <div class="more">
                    <div @click="guanyi">换一批</div>
                </div>
            </div>
        </div>
        <!-- 提示信息 -->
        <div>
            <el-dialog title="分享到朋友圈" v-model="dialogVisible" width="306px">
                <div class="qrcode">
                    <img src="../assets/weixin01.png" alt="">
                </div>
                <div class="tr">
                    <p>打开微信，点击底部的“发现”</p>
                    <p>使用“扫一扫”即可将网页分享至朋友圈</p>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<!-- 这是js部分的设置 -->
<script>
import { getNavigationById, getNavigationContext } from "../api/index";
import BreadCrumb from '../components/bread-crumb.vue';
import Loading from "../components/loading.vue";
export default {
    components: { BreadCrumb, Loading },
    data() {
        return {
            // 面包屑部分
            indexId: '要闻聚焦',
            dialogVisible: false,
            // 接收数据的数组
            publisherlist: {},
            huarry: [],
            params: {
                pageNum: 1,
                pageSize: 10,
                title: '要闻聚焦'
            },
            load: null
        }
    },
    created() {
        // 文章部分的数据
        let id = this.$route.query.tid
        getNavigationById({ tid: id }).then(async res => {
            this.publisherlist = await res.data
        })
        // 其他新闻数据
        getNavigationContext(this.params).then(async result => {
            this.huarry = await result.rows
        })
    },
    methods: {
        // 文章部分的数据
        getNewsData() {
            const id = this.$route.query.tid
            getNavigationById({ tid: id }).then(async res => {
                this.publisherlist = await res.data
            })
        },
        // 其他新闻数据
        getOtherData() {
            getNavigationContext(this.params).then(async result => {
                this.huarry = await result.rows
            })
        },
        // 微信公众号跳转
        palaton() {
            this.dialogVisible = !this.dialogVisible
        },
        // 换一页的设置
        guanyi() {
            this.params.pageNum = this.params.pageNum + 1
            this.getOtherData()
        },
        // 本页面跳转无需刷新
        getpush(value) {
            this.$router.push({ path: '/NewsDetails', query: { tid: value } })
            this.getNewsData()
            if (this.params.pageNum != 1) {
                this.params.pageNum = 1
                this.huarry.splice(0)
                this.getOtherData()
            }
        }
    },
    updated() {
        this.$toTop()
    }
}
</script>
<!-- 这是csss属性设置 -->
<style lang="less" scoped>
.qi-show {
    box-sizing: border-box;
}

.qi-editor {
    box-sizing: border-box;
    counter-reset: list-0;
    line-height: 1.42;
    height: 100%;
    outline: 0;
    overflow-y: auto;
    padding: 12px 15px;
    tab-size: 4;
    -moz-tab-size: 4;
    text-align: left;
    white-space: pre-wrap;
    word-wrap: break-word;

    .ql-align-center ::after {
        text-align: center;
    }
}

// 左边布局设计
.new-left {
    width: 830px;

    .title {
        margin-top: 41px;
        font-size: 30px;
        font-weight: bold;
        font-stretch: normal;
        line-height: 40px;
        letter-spacing: 0;
        color: black;
    }

    .publisher {
        margin-top: 20px;
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 68px;
        letter-spacing: 0;
        color: #666666;
        position: relative;

        .img1 {
            position: absolute;
            ;
            right: 20px;
            width: 25px;
            height: auto;
            top: calc(~'50% - 13px');
        }
    }

    .line {
        width: 100%;
        height: 1px;
        background: #f4f4f4;
        margin-bottom: 16px;
    }

    .news-content {
        font-family: NotoSansHans-Light;
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 28px;
        letter-spacing: 0px;
        color: #333333;
        height: auto;

        .ql-align-justify {
            text-align: justify;
        }
    }
}

// 右边布局设计
.new-right {
    width: 350px;

    .account-item {
        width: 309px;
        margin: a auto;
        padding: 26px 0;
        background-color: #fff;
        border-radius: 6px;
        border: 1px solid rgba(114, 124, 139, 0.1);

        .account-icon {
            width: 85px;
            height: 85px;
            margin: 0 auto 16px auto;
            border-radius: 50%;
            background-color: #fff;
            border: 1px solid #eeeeee;
        }

        .account-name {
            font-size: 18px;
            font-weight: bold;
            font-stretch: normal;
            line-height: 22px;
            letter-spacing: 0;
            color: black;
        }

        .account-text {
            font-size: 14px;
            line-height: 45px;
            letter-spacing: 0;
            color: #666666
        }

    }

    .recommend {
        width: 309px;
        margin: 59px auto 15px auto;

        .recommend-tit {
            font-size: 18px;
            line-height: 30px;
            letter-spacing: 0;
            color: black;
        }
    }

    .item {
        width: 309px;
        margin: 0 auto 10px auto;
        padding-bottom: 15px;
        border-bottom: 1px solid #f4f4f4;

        .stop {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #b2012a;
            margin-right: 10px;
        }

        .item-heading {
            font-size: 16px;
            text-overflow: ellipsis;
            font-weight: 400;
            white-space: nowrap;
            overflow: hidden;
        }
    }

    .more {
        text-align: center;
        font-family: NotoSansHans-Regular;
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 25px;
        letter-spacing: 0px;
        color: #747e8c;

        div {
            cursor: pointer;
        }
    }
}

// 弹窗
.qrcode {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.tr {
    font-size: 14px;
    color: #808080;
    text-align: center;
}
</style>
